<template>
  <div class="wap-container enApplyOutOrder">
    <group label-width="0.8rem" label-align="left" gutter="0">
      <x-input title="联系人" v-model="formdata.linkMan"  placeholder="请输入">
      </x-input>
      <x-input title="电话" v-model="formdata.linkPhone"   placeholder="请输入">
      </x-input>
      <selector :required="true" placeholder="请选择区县" title="区县" :value-map="['id', 'name']" v-model="formdata.county" @on-change="getCustomer"
                :options="countyOptions"></selector>
      <selector :required="true" placeholder="请选择营业网点" title="营业网点" :value-map="['id', 'customerName']" v-model="formdata.customer.id" @on-change="getEquipment"
                :options="serviceObjectOptions"></selector>
      <selector :required="true" placeholder="请选择设备编号" title="设备编号" :value-map="['id', 'equipmentNo']" v-model="formdata.equipment.id" @on-change=""
                :options="equipmentOptions"></selector>
      <div v-if="false" class=" rowflex" style="padding-top: 0.1rem; margin-bottom: 0.1rem; margin-left: 0.15rem; line-height: 0.25rem;border-top: solid 1px #ebebeb;">
        <div style="height: 0.7rem; width: 0.52rem; text-align: center;">
          <img src="/static/img/btn-paizhao@3x.a5842ee.png" alt="" style="height: 0.45rem; width: 0.45rem;">
          <span>拍照报修</span>
        </div>
        <div style="display: flex; overflow: auto; position: absolute; right: 0.18rem; left: 0.78rem;"></div>
      </div>
      <x-textarea title="设备事由" :required="true" v-model="formdata.errorDescription" :max="140" placeholder="请输入">
      </x-textarea>
      <x-input @click.native="showPopupWork(false)"  placeholder="请选择工单类型" title="工单类型"  :readonly="true"  v-model="workOrderTypeText"
                   ></x-input>
    </group>
    <section class="bottom_bar cfff" @click="createdOrder()">
      确定
    </section>

    <div v-transfer-dom>
      <popup v-model="repairPopupWork" height="90%" style="background-color: #fff">
        <popup-header
          left-text="取消"
          right-text="确认"
          title="工单类型"
          :show-bottom-border="false"
          @on-click-left="showPopupWork(false)"
          @on-click-right="showPopupWork(true)"></popup-header>
        <checklist :options="GDWFLXList" v-model="chooseWFLX"></checklist>
      </popup>
    </div>
  </div>
</template>

<script>
  import {Group, XInput, XTextarea, Selector, Cell, Icon, XButton, PopupHeader, Popup, TransferDom, Radio, PopupPicker,Checklist } from 'vux'
  import UploadImage from './uploadImage.vue'
  import AMap from 'AMap'
  import AMapUI from 'AMapUI'
  export default {
    name: "ManCreatedInOrder",
    components: {
      Group,
      XInput,
      XTextarea,
      Selector,
      Cell,
      Icon,
      XButton,
      PopupHeader,
      Popup,
      Radio,
      UploadImage,
      PopupPicker,
      Checklist,
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        repairPopupWork: false,//服务类型选择
        formdata: {
          county: '',
          customer: {
            id: ''
          },
          engineer: {
            id: ''
          },
          equipment: {
            id: ''
          },
          errorDescription: '',
          linkMan: '',
          linkPhone: '',
          proposer: {
            id: ''
          },
          repairFileStore: '',
          workOrderType: []
        },
        userInfo: {},
        GDWFLXList: [],
        chooseWFLX: [],
        engineerList: [],
        workFlowOptions: [],
        countyOptions: [],
        serviceObjectOptions: [],
        equipmentOptions: [],

      }
    },
    computed:{
      workOrderTypeText: {
        get: function() {
          return this.formdata.workOrderType.map(item => {
            return item.value;
          }).join('，')
        },
        set: function () {}
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init: function () {
        this.$getUserInfo().then(user=> {
          this.userInfo = user
          this.formdata.engineer.id =  user.id
          //this.getWorkFlow()
          this.getCountys()
          this.getFWLXList()
          this.getGCSList()
        })
      },
      getFWLXList: function () {
        this.$http.get('/work/api/workOrderType?serviceType=OUT&noPage=true').then(res => {
            this.GDWFLXList = res.data.data.map(item => {
              return {key:item.id,value:item.name}
            });
          }
        )
      },
      getGCSList: function () {
        //获取工程师
        this.$http.get('/account/api/users?noPage=true&companyId='+this.userInfo.companyBean.id).then(res => {
          console.log(res)
          this.engineerList = res.data.data
        })
      },
      //getWorkFlow: function () {
        //流程模板获取
  //      this.$http.get('/work/api/workFlow',{params:{status:0}}).then(res=>{
  //        this.workFlowOptions = res.data.data.rows
  //      })
   //   },
      getCountys: function () {
        //区县获取
        this.$http.get('/work/api/customer/countys').then(res=>{
          for (var i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i] !=='string' && res.data.data[i].length > 0){
              this.countyOptions.push(res.data.data[i])
            }
          }
        })
      },
      getCustomer: function () {
        //获取区县下的服务对象
        this.$http.get('/work/api/customer/customerOfCountys?county='+ this.formdata.county).then(res=>{
          this.serviceObjectOptions = res.data.data
        })
      },
      getEquipment: function () {
        //服务对象id获取设备地址
        this.$http.get('/work/api/equipment/'+this.formdata.customer.id +'/equipments').then(res=>{
          this.equipmentOptions = res.data.data
          this.search = res.data.data[0].customer.address  // 服务网点位置
        })
      },
      getEquipmentInfo: function (id){
        this.$http.get('/work/api/equipment/'+ id +'/?fields=customer&include=false').then(res=>{
          this.equipmentInfo = res.data.data
          console.log(this.equipmentInfo)

        })
      },
      createdOrder: function () {
        if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.formdata.linkPhone)) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入11位长度的电话号码'
          })
          return false
        }

        console.log(this.formdata)
        // 判断是否有联系人
        if (this.formdata.linkMan == ""){
          this.$vux.alert.show({
            title: '提示',
            content: '请填写联系人'
          })
          return false
        }
        // 判断是否有区县
        if (this.formdata.county == ""){
          this.$vux.alert.show({
            title: '提示',
            content: '请选择区县'
          })
          return false
        }
        // 判断是否有营业网点
        if (this.formdata.customer.id == ""){
          this.$vux.alert.show({
            title: '提示',
            content: '请选择营业网点'
          })
          return false
        }

        // 判断是否有设备事由
        if (this.formdata.errorDescription == ""){
          this.$vux.alert.show({
            title: '提示',
            content: '请填写设备事由'
          })
          return false
        }

        // 判断是否有工单类型
        if (this.formdata.workOrderType.length == 0){
          this.$vux.alert.show({
            title: '提示',
            content: '请选择工作类型'
          })
          return false
        }
        this.postRepairService()
        // this.$http.post('/work/api/request', this.formdata).then(res=>{
        //   this.$vux.toast.show({
        //     text: '创建成功'
        //   })
        //   let that = this
        //   setTimeout(function () {
        //     that.$router.push({path: '/engineer/enMyOrders'})
        //   },1000)
        // })

      },
      postRepairService: function () {
        let num = this.chooseWFLX.length
        let i = 0
        let equipment = {}
        if (this.formdata.equipment.id == '') {
          equipment = null
        } else {
          equipment = {
            id : this.formdata.equipment.id
          }
        }
        let data = {
          linkPhone: this.formdata.linkPhone,
          linkMan: this.formdata.linkMan,
          engineer: this.formdata.engineer,
          equipment: equipment,
          workOrderType: {
            id: this.chooseWFLX[i]
          },
          errorDescription: this.formdata.errorDescription,
          county: this.formdata.county,  //this.formdata.county,
          customer: this.formdata.customer//this.formdata.customer
          // equipment: {
          //   address: this.formdata.address,
          //   code: this.formdata.id
          // }
        }
        this.$http.post('/work/api/request', data).then(res => {  //一层
            i++
            if (i < num) {
              data.workOrderType = {
                id: this.chooseWFLX[i]
              }
              this.$http.post('/work/api/request', data).then(res => {  //一层
                  i++
                  if (i < num) {
                    data.workOrderType = {
                      id: this.chooseWFLX[i]
                    }
                    this.$http.post('/work/api/request', data).then(res => {  //一层
                        i++
                        if (i < num) {
                          data.workOrderType = {
                            id: this.chooseWFLX[i]
                          }
                          this.$http.post('/work/api/request', data).then(res => {  //一层
                              i++
                              if (i < num) {

                              } else {
                                this.$router.push({path: "/engineer/enMyOrders"})
                              }
                            }
                          )
                        } else {
                          this.$router.push({path: "/engineer/enMyOrders"})
                        }
                      }
                    )
                  } else {
                    this.$router.push({path: "/engineer/enMyOrders"})
                  }
                }
              )
            } else {
              this.$router.push({path: "/engineer/enMyOrders"})
            }
          }
        )
      },
      showPopup: function () {
        this.createPopup = !this.createPopup
      },
      showPopupWork(index) {
        this.repairPopupWork = !this.repairPopupWork;
        if(index){
          this.formdata.workOrderType = this.GDWFLXList.filter(item=>{
            return this.chooseWFLX.includes(item.key);
          })
        }else{
          this.chooseWFLX = this.formdata.workOrderType.map(item=>{
            return item.key;
          })
        }
      },
    }
  }
</script>

<style lang="less">
  .wap-container {
    font-size: 0.13rem;
    padding-bottom: 0.6rem;
  }
  .enApplyOutOrder {
    .user-info{
      display: flex;
      justify-content: space-between;
      height: 0.4rem;
      background-color: #fff;
      line-height: 0.4rem;
      padding: 0 0.2rem 0 0.15rem;
      margin-bottom: 0.1rem;
    }
    .top {
      padding-bottom: 0.15rem;
      box-shadow: 0 0 0.04rem 0 #ebebeb;
    }
    .mess-item {
      margin-top: 0.1rem;
      /*height: 0.25rem;*/
      line-height: 0.25rem;
      width: 100%;
    }
    .top .mess-item:last-child {
      height: 0.6rem;
    }
    .mess-item img {
      width: 0.07rem;
      margin-right: 0.03rem;
      vertical-align: super;
    }
    .mess-item .title-box {
      width: 0.52rem;
      display: flex;
      justify-content: space-between;
    }
    .selectStyle{
      margin-left: 0.18rem;
      -webkit-appearance: none;
      border: 0;
      outline: 0;
      background-color: transparent;
      width: 2.75rem;
      padding-right: 0.2rem;
      font-size: 0.13rem;
      line-height: 0.25rem;
      position: relative;
      z-index: 1;
      background: url("~assets/images2/icon_zuojian@2x.png") no-repeat 2.6rem center;
      background-size: 0.06rem 0.1rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
      span{
        float: right;
        font-size: 0.1rem;
      }
    }
    .mess-item .title {
      width: 0.52rem;
    }
    #file{
      margin-left: 0.18rem;
      position: relative;
      top: -0.25rem;
      opacity: 0;
    }
    .weui-textarea{
      font-size: 0.13rem;
    }
    .weui-textarea-counter {
      font-size: 0.1rem;
      padding-right: 0.05rem;
    }
    .bottom {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .bottom-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }
    .repair-type {
      display: flex;
      justify-content: space-around;
      margin-top: 0.12rem;
      font-size: 0.15rem;
    }
    .repair-item {
      display: flex;
    }

    .repair-date {
      padding: 0 0.58rem;
      margin-top: 0.37rem;
      display: flex;
      justify-content: space-between;
    }

    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
    .weui-vcode {
      background: #fff;
      .weui-cell__bd {
        padding-right: 10px;
        > input {
          border-right: 1px solid gainsboro;
        }
      }
      .fa-search {
        font-size: 0.18rem;
        color: #3FBCFC;
      }
    }
    .weui-cells {
      font-size: 0.13rem;
      input{
        height: 31px;
        line-height: 31px;
      }
      .vux-selector.weui-cell_select {
        padding: 10px 15px;
        .weui-select {
          height: 31px;
          line-height: 31px;
        }
      }
      .weui-cell_select .weui-cell__bd:after {
        border-color: #3FBCFC;
        right: 22px;
      }
      .weui-cell_access {
        .child {
          position: absolute;
          right: 35px;
          font-size: 0.15rem;
        }
        .weui-cell__ft:after {
          border-color: #3FBCFC;
          right: 7px;
        }
      }
    }
    .vux-x-input, .weui-cell_select, .vux-x-textarea {
      .weui-cell__bd {
        padding: 2px;
        border: 0.01rem solid #E5E5E5;
        border-radius: 5px;
      }
    }

    .weui-cell__ft {

      .vux-x-input-right-full {
        margin-left: 0px;
        img {
          height: 12px;
          margin-top: 15px;
          margin-left: -12px;
          margin-right: 5px;
        }
      }
    }
    .weui-label {
      text-align-last: justify;
      padding-right: .1rem;
    }
  }
</style>

